<template>
  <Sticky :offset-top="0">
    <Tabs v-model:active="activeIndex" class="van-hairline--bottom" @change="onTab">
      <Tab v-for="item in $props.tabObject" :key="item.id" :name="item.id" :title="item.title" />
    </Tabs>
  </Sticky>
</template>

<script setup>
import { computed, defineProps, useContext } from 'vue';
import { Sticky, Tabs, Tab } from 'vant';

const props = defineProps({
  tabObject: Object,
  active: [String, Number],
});

const activeIndex = computed(() => props.active);
const { emit } = useContext();

const onTab = (id) => {
  emit('tab', id);
};
</script>
<style scoped lang="less">
:deep(.van-tab--active) {
  & > span {
    color: @primary-color;
  }
}
</style>
